<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <base href="${pageContext.request.contextPath}/"/>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /*定义类名为.thead-blue的样式*/
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css"/>
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">编辑[${lcFlow.flowName }]流程节点</h4>
        <input type="hidden" id="flowid" value="${lcFlow.oid }">
    </div>
    <div class="panel-body">
        <div class="col-md-12" style="text-align: right;">
            <button type="button" onclick="editNode(0)" class="btn btn-success">添加节点</button>
            <button type="button" onclick="location.href='approve/selectApprove'" class="btn btn-info">返回</button>
        </div>
        <c:forEach items="${listNode }" var="node" varStatus="i">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-primary">
                    <div class="panel-heading" style="text-align: center">
                            ${i.count }.${node.name}
                    </div>
                    <div class="panel-body">
                        <div class="col-md-7">
                            <c:if test="${node.isByDept=='Y' }">
                                按部门归属审批
                            </c:if>
                            <c:if test="${node.isByDept=='N' }">
                                ${node.dept.deptName } -- ${node.job.name } 审批
                            </c:if>
                        </div>
                        <div class="col-md-5">
                            <button type="button"
                                    onclick="editNode(${node.oid},'${node.name }','${node.prenodeid }','${node.deptid }','${node.jobid }','${node.isByDept }')"
                                    class="btn btn-success btn-xs">修改节点
                            </button>
                            <button type="button" onclick="deleteNode(${node.oid})" class="btn btn-danger btn-xs"
                                    data-toggle="modal" data-target="#confirmModal">删除节点
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-md-offset-3" style="text-align: center">
                <img src="view/lc/img/next.png" width="38px">
                <BR><BR>
            </div>
        </c:forEach>
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading" style="text-align: center">
                    ${listNode.size()>0?"结束":"暂无节点" }
                </div>
                <div class="panel-body" style="text-align: center">
                    ${listNode.size()>0?"审批完成":"请添加节点" }
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editNodeModal" tabindex="-1" role="dialog"
     aria-labelledby="editNodeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="editNodeModalLabel">编辑节点信息</h4>
            </div>
            <form action="node/editNode" method="post" class="form-horizontal" role="form"
                  id="editNodeForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="name" class="col-md-3 control-label">流程名称</label>
                            <div class="col-md-8">
                                <input type="hidden" name="oid" id="oid">
                                <input type="hidden" name="parentid" value="${lcFlow.oid }">
                                <input type="text" id="name" name="name" class="form-control" placeholder="请输入节点名称">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="prenodeid" class="col-md-3 control-label">上级节点</label>
                            <div class="col-md-8">
                                <select id="prenodeid" name="prenodeid" class="form-control">
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="isByDept" class="col-md-3 control-label">审批类型</label>
                            <div class="col-md-8">
                                <select id="isByDept" name="isByDept" class="form-control">
                                    <option value="Y">--按部门归属--</option>
                                    <option value="N">--按相关部门--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="deptrow">
                        <div class="form-group col-md-12">
                            <label for="deptid" class="col-md-3 control-label">审批部门</label>
                            <div class="col-md-8">
                                <select id="deptid" name="deptid" class="form-control">
                                    <option value="">--请选择部门--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="jobrow">
                        <div class="form-group col-md-12">
                            <label for="jobid" class="col-md-3 control-label">审批职门</label>
                            <div class="col-md-8">
                                <select id="jobid" name="jobid" class="form-control">
                                    <option value="">--请选择职位--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" id="sub" class="btn btn-primary">确认提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div style="display: none;">
    <select id="demoprenodeid">
        <option value="">--设为首节点--</option>
        <c:forEach items="${listNode }" var="n">
            <option value="${n.oid }">--${n.name }--</option>
        </c:forEach>
    </select>
</div>

<br>
<br>
<br>

<%@include file="../modal/confirm.jsp" %>
<%@include file="../modal/alertmsg.jsp" %>

<script type="text/javascript">
    $(document).ajaxError(function (event, xhr) {
        if (xhr.status == "403") {//没有权限
            document.location.href = xhr.getResponseHeader("url");
        } else if (xhr.status != "200") {
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>
</body>
<script type="text/javascript">

    var deleteoid;

    function deleteNode(oid) {
        deleteoid = oid;
    }

    function deleteConfirm() {
        $.get("node/deleteNode", {"oid": deleteoid}, function (s) {
            if (s == true) {
                document.location.href = "node/listNode?flowid=" + $("#flowid").val();
            } else {
                $("#alertmsg").text("删除失败!当前节点正在使用，不能删除!");
                $('#alertMsgModal').modal('show');
            }
        });
    }

    function editNode(oid, name, prenodeid, deptid, jobid, isByDept) {

        $('#prenodeid')[0].options.length = 0;
        $('#prenodeid').append($('#demoprenodeid option').clone());
        if (oid == 0) {
            $("#oid").val("");
            $("#name").val("");
            $("#prenodeid").val("");
            $("#deptid").val("");
            $("#jobid").val("");
            $("#isByDept").val("Y");
            $("#deptrow").hide();
            $("#jobrow").hide();

        } else {
            $("#oid").val(oid);
            $("#name").val(name);
            $("#prenodeid").val(prenodeid);
            $("#deptid").val(deptid);
            loadjob(deptid, jobid);
            $("#isByDept").val(isByDept);
            if (isByDept == 'Y') {
                $("#deptrow").hide();
                $("#jobrow").hide();
            } else {
                $("#deptrow").show();
                $("#jobrow").show();
            }
            $("#prenodeid option[value='" + oid + "']").remove();
        }
        $('#editNodeModal').modal('show');
    }

    $(document).ready(function () {

        bindValidation();//绑定验证

        $('#editNodeModal').on('hidden.bs.modal', function () {//监听modal消失
            $("#editNodeForm").data('bootstrapValidator').destroy();
            $('#editNodeForm').data('bootstrapValidator', null);
            bindValidation();//要重新绑定验证
            $("#editNodeForm")[0].reset(); //将表单中的数据也清空

        })

        loaddept();

        $("#deptid").change(function () {
            loadjob(this.value);
        });

        $("#isByDept").change(function () {
            if ($(this).val() == "Y") {
                $("#deptrow").hide();
                $("#jobrow").hide();
            } else {
                $("#deptid").val("");
                $("#jobid").val("");
                $("#deptrow").show();
                $("#jobrow").show();
            }
        });

        $("#deptrow").hide();
        $("#jobrow").hide();
    });


    function loaddept() {
        $.getJSON("dept/listDeptUseSelect", function (listdept) {
            var dept = $("#deptid")[0];
            dept.options.length = 1;
            for (var i = 0; i < listdept.length; i++) {
                var d = listdept[i];
                dept.options.add(new Option(d.deptName, d.oid));
            }
        });
    }

    function loadjob(deptid, jobid) {
        $("#jobid")[0].options.length = 1;
        if (this.value == "") {
            return;
        }
        $.getJSON("dept/listDeptJobUseSelect", {"deptid": deptid}, function (listjob) {
            var job = $("#jobid")[0];
            job.options.length = 1;
            for (var i = 0; i < listjob.length; i++) {
                var job1 = listjob[i];
                job.options.add(new Option(job1.name, job1.oid));
            }
            $("#jobid").val(jobid);
        });
    }

    function bindValidation() {
        $("#editNodeForm").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {/*input状态样式图片*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '请输入节点名称'
                        }
                    }
                },
                deptid: {
                    validators: {
                        callback: {
                            message: '请选择审批的部门',
                            callback: function (value, validator) {
                                if ($("#deptid").val() == "" && $("#isByDept").val() == 'N') {
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                        }
                    }
                },
                jobid: {
                    validators: {
                        callback: {
                            message: '请选择审批的职位',
                            callback: function (value, validator) {
                                if ($("#jobid").val() == "" && $("#isByDept").val() == 'N') {
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
                validator.defaultSubmit();
            }
        });
    }

</script>
</html>